<template>
  <f7-page>
    <div class="div2">
      <span class="toubu">Hotel欢迎您</span>
    </div>
    <div class="div1">
      <div class="yuding">
        <div class="yuding1">
          <img src="@/assets/home/yuyue.svg" @click="yuding" class="img3">
          <p>预定</p>
        </div>
        <div class="chaxun1">
          <img src="@/assets/home/order.svg" @click="orderquery" class="img3">
          <p>订单查询</p>
        </div>
      </div>
      <div class="management">
        <img src="@/assets/home/guanli.svg" @click="guanli" class="img2">
        <p>管理</p>
      </div>
    </div>
    <span class="dibu">Hotle版权所有</span>
  </f7-page>
</template>
<script>
export default {
  methods: {
    guanli() {
      this.$f7router.navigate("/login/");
    },
    yuding() {
      this.$f7router.navigate("/reservationquery/");
    },
    orderquery() {
      this.$f7router.navigate("/ordercondition/");
    }
  }
};
</script>
<style scoped>
/* .login-screen-content {
  background-image: linear-gradient(to top, #fff, #2198f3bf) !important;
}  */
/* .a[login-screen-content] .b {
  background-image: linear-gradient(to top, #fff, #2198f3bf) !important;
}*/
.toubu {
  color: #0a0a0a;
  text-align: center;
  display: inline-block;
  width: 100%;
  position: absolute;
  font-size: 35px;
}
.div2 {
  margin-top: 30px;
  width: 20%;
}
/* .page {
  background: linear-gradient(to top, #fff, #2198f3bf);
  
}  */

.yuding {
  text-align: center;
  height: 40%;
  margin: 10px;
  box-shadow: 0 0 10px 10px rgba(80, 95, 193, 0.34902);
  border-radius: 6px;
}
p {
  font-size: 15px;
}
.management {
  text-align: center;
  height: 40%;
  margin: 10px;
  box-shadow: 0 0 10px 10px rgba(80, 95, 193, 0.34902);
  border-radius: 6px;
  margin-top: 40px;
}
.img2 {
  width: 17%;
  margin-top: 10%;
}
.div1 {
  height: 60%;
  margin-top: 40%;
}
.dibu {
  color: #b4b4b4;
  text-align: center;
  display: inline-block;
  width: 100%;
  position: absolute;
  bottom: 5%;
}
.yuding1,
.chaxun1 {
  text-align: center;
  width: 49%;
  float: left;
  padding-top: 7%;
}
.img3 {
  width: 40%;
}

/* .login-screen-content {
      background-image: linear-gradient(to top, #fff,#2198f3bf) !important;
  border-radius: 0%;
} */
</style>

